<template>
	<a-drawer
		:width="720"
		:visible="showStatus"
		ok-text="保存"
		unmount-on-close
		@ok="handleOk"
		@cancel="close"
		@close="closed"
	>
		<template #title>
			{{ title }}
		</template>
		<a-form ref="formRef" :model="form" :style="{ width: '448px' }" layout="vertical" :rules="formRules">
			<a-form-item field="adminName" label="姓名">
				<a-input v-model="form.adminName" placeholder="请输入" />
			</a-form-item>
			<a-form-item field="mobPhone" label="手机号" :validate-trigger="['blur']">
				<a-input v-model="form.mobPhone" placeholder="请输入" />
			</a-form-item>
			<a-form-item field="adminType" label="选择人员角色">
				<a-select v-model="form.adminType" placeholder="请选择">
					<a-option v-for="item in roleList" :key="item.key" :value="item.key">{{ item.name }}</a-option>
				</a-select>
			</a-form-item>
		</a-form>
	</a-drawer>
</template>

<script setup lang="ts">
import { ref, toRefs, computed, defineProps, defineEmits, withDefaults } from 'vue';
import { Message } from '@arco-design/web-vue';
import { errors, user } from '@/api';
import { ROLE_MAP } from '@/constant/adminMap';
import { useUserStore } from '@/store';

const userStore = useUserStore();
const { adminInfo } = toRefs(userStore);

const roleList = computed(() => {
	let list = Object.keys(ROLE_MAP).map((e) => {
		return {
			name: ROLE_MAP[e],
			key: Number(e),
		};
	});
	// 如果本身非超管，需要取消超管选项
	if (adminInfo.value && adminInfo.value.adminType !== 0) {
		list = list.filter((e) => {
			return e.key !== 0;
		});
	}
	return list;
});

interface PropsType {
	title: '新增人员' | '编辑人员';
}
interface EmitType {
	(e: 'updatePersonList'): void;
}

const props = withDefaults(defineProps<PropsType>(), {
	title: '新增人员',
});
const emit = defineEmits<EmitType>();

const handleOk = () => {
	formRef.value.validate((error: object | undefined) => {
		if (!error) {
			updatePersonAdmin();
			close();
		}
	});
};

const mobPhoneValid = (v: string, cb: Function) => {
	if (!v) {
		return cb('请输入手机号');
	} else if (!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(v)) {
		return cb('请输入正确的手机号');
	} else {
		cb();
	}
};
const formRef = ref();
const formRules = {
	mobPhone: [{ validator: mobPhoneValid }],
	adminName: [{ required: true, message: '请输入姓名' }],
	adminType: [{ required: true, message: '请选择角色' }],
};
interface formType {
	mobPhone: string;
	adminName: string;
	adminType: number | string;
}
const form = ref<formType>({
	mobPhone: '',
	adminName: '',
	adminType: '',
});

const updatePersonAdmin = async () => {
	try {
		const { ok, data } = await user.addPersonAdmin(form.value);
		if (!ok) {
			return;
		}
		Message.success(data.msg);
		emit('updatePersonList');
	} catch (error) {
		errors(error);
	}
};

const showStatus = ref(false);
const show = () => {
	showStatus.value = true;
};
const close = () => {
	showStatus.value = false;
};
const closed = () => {
	form.value = {
		mobPhone: '',
		adminName: '',
		adminType: '',
	};
};
interface editInfoType extends formType {
	adminMobile?: string;
}
const edit = (info: editInfoType) => {
	let data = { ...info };
	data.mobPhone = info.adminMobile || '';
	form.value = { ...data };
	show();
};
defineExpose({
	show,
	edit,
});
</script>

<style lang="less"></style>
